import { v2 } from 'cc';
import { v4 } from 'cc';
import { Sprite } from 'cc';
import { Vec2 } from 'cc';
import { _decorator, Component, Node } from 'cc';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('CustomMaskCircle')
@executeInEditMode
export class CustomMaskCircle extends Component {

    _sprite: Sprite = null;

    @property
    private _center: Vec2 = v2(0, 0);
    @property
    public get center(): Vec2 { return this._center; }
    public set center(v: Vec2) { this._center = v; this.refreshMaterial(); }

    @property
    private _radius: number = 100;
    @property
    public get radius(): number { return this._radius; }
    public set radius(v: number) { this._radius = v; this.refreshMaterial(); }

    @property
    private _softEdge: number = .5;
    @property
    public get softEdge(): number { return this._softEdge; }
    public set softEdge(v: number) { this._softEdge = v; this.refreshMaterial(); }

    protected onLoad(): void {
        this.refreshMaterial();
    }

    refreshMaterial() {
        if (this._sprite == null) this._sprite = this.node.getComponent(Sprite);
        if (this._sprite == null || this._sprite.spriteFrame == null) return;
        let material = this._sprite.getSharedMaterial(0);
        if (material) {
            material.setProperty('param0', v4(this.center.x, this.center.y, this.radius, this.softEdge));
        }
    }
}

